<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            height: 100%;
            width: 100%;
        }

        .list {
            list-style: none;
        }

        .list>li>img {
            width: 100px;
            float: left;
        }

        li {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <ul class="list">
    </ul>
    <script>
        /*
            因为在实际的开发过程中，我们的数据都是后端传来的，所以这里我们模拟一下从后端获取数据然后渲染到页面上的操作
        */
        // 假设这个数据列表是后端给我们的    
        const movielist = [{
                title: '还是觉得你最好',
                src: 'https://pic.maizuo.com/usr/movie/abda2a3b3a3d6734e22ad7430b5e2854.jpg?x-oss-process=image/quality,Q_70',
                score: 7.7
            },
            {
                title: '哥，你好',
                src: 'https://pic.maizuo.com/usr/movie/f85b53cad68c6c0c2cba934107f2199e.jpg?x-oss-process=image/quality,Q_70',
                score: 7.9
            },
            {
                title: '还是觉得你最好',
                src: 'https://pic.maizuo.com/usr/movie/5b5400f760e89d1ae725f6b67b95ba3a.jpg?x-oss-process=image/quality,Q_70',
                score: 9.9
            },
        ]

        document.querySelector('.list').innerHTML = movielist.map(item => {
            return `
            <li>
                <img src=${item.src}>
                <h3>${item.title}</h3>
                <p>观众评分${item.score}</p>
            </li>
            `
        })
    </script>
</body>

</html>